<%@page import="cn.com.dhcc.app.core.CoreEnv.CoreInitCtx"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>${appname}</title>
<%@ include file="/WEB-INF/view/common/css_js_ace.jsp"%>
<!-- fullcalendar -->
<link rel="stylesheet" href="${ctx}/static/css/fullcalendar.min.css"
	type="text/css" />
<script type="text/javaScript"
	src="${ctx}/static/js/calendar/moment-with-locales.js"></script>
<script type="text/javaScript"
	src="${ctx}/static/js/calendar/fullcalendar.min.js"></script>
<script type="text/javaScript" src="${ctx}/static/js/calendar/zh-cn.js"></script>
<!-- end fullcalendar -->


<script type="text/javascript">
	$(document).ready(function() {
		loadCalendar();
		$(".fc-toolbar").remove();
	    getCalendarTitle();
	    window.parent.setIframeHeight(window.parent.document
				.getElementById('content'));
	    
	    $('#my-prev-button').click(function() {
	        $('#calendar').fullCalendar('prev');
	        getCalendarTitle();
	    });
		
		$('#my-next-button').click(function() {
		    $('#calendar').fullCalendar('next');
		    getCalendarTitle();
		});
		
		$('#my-today-button').click(function() {
		    $('#calendar').fullCalendar('today');
		    getCalendarTitle();
		});
		
		$('#calendar').fullCalendar('option', 'height', 400);
	});
	
	function loadCalendar() {
		var type = $("input[name='stat_name']:checked").val();
		$('#calendar').fullCalendar({
			header: {
	            left: '',
	            center: '',
	            right: ''
	        },
	        locale: 'zh-cn',
			dayRender: function (date, cell) {
				var today = new Date();
				if(date.format() === today.getDate()) {
					cell.css("background-color", "yellow");
				}
				today.setDate(today.getDate()-1);
				if(date < today) {
					cell.css("background-color", "rgb(171, 186, 195)");
				}
			},
			eventRender: function (event, element, view) {
	            element.css('border', 'none');
	            element.css('text-align','center');
	            element.css('font-size', '15px');
	            //element.removeClass();
	            //element.first().css('margin-top', '20px');

	            if(event.isMax){
	            	var dataToFind = moment(event.start).format('YYYY-MM-DD');
	                $("td[data-date='" + dataToFind + "']").css("background-color", "red");
	            }else{
					var dataToFind = moment(event.start).format('YYYY-MM-DD');
					$("td[data-date='" + dataToFind + "']").css("background-color", "");
				}
			},
			events: function(start, end, timezone, callback) {
	        	start = start.format('YYYY-MM-DD');
	        	end = end.format('YYYY-MM-DD');
	        	var taskId = $('#task').val();
	            $.ajax({
	                url: _ctx + "/stat/get_cal_data.do",
	                dataType: 'json',
	                data: {
	                    start: start,
	                    end: end,
	                    taskId: taskId,
	                    type: $("input[name='stat_name']:checked").val()
	                },
	                success: function(resp) {
	                	if (resp.status == '1') {
	                		var events = [];
	                		var myEvents = resp.data;
	                		$.each(myEvents, function(key,value) {
	                			events.push({
		                            title: value.title,
		                            start: value.start,
		                            isMax: value.isMax
									
		                        }); 
	                		}); 
		                    callback(events);
	    				} else {
	    					 parent.ui.msg(resp.msg, 0);
	    				}
	                    
	                }
	            });
	        },
	        eventColor: 'inherit',
	        eventTextColor:'black',
	        displayEventTime: false,
	    })
	}
	function getCalendarTitle(){
		var moment = $('#calendar').fullCalendar('getDate');
		var month = moment.month() +　1;
		var title = moment.year() + "年" + month +"月"+"每日同步情况"
	    $('#calendar_title').html(title);
		//calendar_title
	}
	
	function reloadCalendar() {
		$('#calendar').fullCalendar('removeEvents');
	    $('#calendar').fullCalendar('refetchEvents');
	}
	
	
</script>
</head>

<body>
	<div class="main-container" id="main-container">
		<div class="main-container-inner">
			<div class="main-content" style="margin-left: 0px;">

				<div class="breadcrumbs" id="breadcrumbs">
					<ul class="breadcrumb">
						<li><i class="icon-home home-icon"></i> 首页</li>
						<li class="active">综合统计</li>
						<li class="active">任务日历</li>
					</ul>
				</div>

				<div class="page-content">
					<div class="tabbable">
						<ul class="nav nav-tabs" id="myTab">
							<li class="active"><a href="${ctx}/stat/task_calendar.do">
									任务日历图 </a></li>

							<li><a href="${ctx}/stat/taskCalenda_info_list.do"> 表格查看
							</a></li>
						</ul>

					</div>

					<div class="tab-content" id="myTabContent">
						<div class="row">
							<div class="col-xs-10">
								<div class="row">
									<div class="col-xs-2" style="padding-top:2px;">
										<span class="editable">
										<div class="fc-button-group">
											<button id="my-prev-button" type="button"
												class="fc-prev-button fc-button fc-state-default fc-corner-left">
												<i class="icon-chevron-left"></i>
											</button>
											<button id="my-next-button" type="button"
												class="fc-next-button fc-button fc-state-default fc-corner-right">
												<i class="icon-chevron-right"></i>
											</button>
										</div>

										<button id="my-today-button" type="button"
											class="fc-today-button fc-button fc-state-default fc-corner-left fc-corner-right">今天</button>
										</span>
									</div>

									<div  class="col-xs-10">
										<div  class="pull-left" style="padding-top:2px;"><span id="calendar_title" class="editable" style="font-size:14px;"></span></div>
	
										<div class="pull-left" style="margin-left: 62px;">
											<span class="editable" style="font-size:14px;"> 选择任务: </span> <select id="task" 
												onchange="reloadCalendar()" style="width: 200px;margin-bottom: 3px;">
												<option value="all" select="selected">全部任务</option>
												<c:forEach var="task" items="${tasks}" varStatus="stc">
													<option value="${task.id}">${task.taskName}</option>
												</c:forEach>
											</select>
										</div>
	
										<div class="pull-left mg-left12">
											<span class="editable" style="font-size:14px;"> 统计类型： </span> <label> <input
												type="radio" value="0" checked="checked" name="stat_name"
												onchange="reloadCalendar();" /> <span>频次(次)</span>
											</label> <label> <input type="radio" value="1"
												name="stat_name" onchange="reloadCalendar();" /> <span>数据量(条)</span>
											</label>
										</div>
									</div>
								</div>
								
								<%-- <div class="widget-header widget-header-flat">
									<!-- <div class="btn-group">
											<button id="my-prev-button" type="button"
												class="btn btn-primary">
												<i class="icon-chevron-left"></i>
											</button>
											<button id="my-next-button" type="button"
												class="btn btn-primary">
												<i class="icon-chevron-right"></i>
											</button>
									</div> -->
									<div class="fc-button-group"><button type="button" class="fc-prev-button fc-button fc-state-default fc-corner-left"><span class="fc-icon fc-icon-left-single-arrow"></span></button><button type="button" class="fc-next-button fc-button fc-state-default fc-corner-right"><span class="fc-icon fc-icon-right-single-arrow"></span></button></div>
									
									<button id="my-today-button" type="button"
											class="fc-today-button fc-button fc-state-default fc-corner-left fc-corner-right">今天</button>
											
									<div id="calendar_title"></div>
									
									<span class="editable"> 选择任务: </span> <select id="task"
											onchange="reloadCalendar()">
											<option value="all" select="selected">全部任务</option>
											<c:forEach var="task" items="${tasks}" varStatus="stc">
												<option value="${task.id}">${task.taskName}</option>
											</c:forEach>
										</select>
										
									<span class="editable"> 统计类型： </span> <label> <input
											type="radio" value="0" checked="checked" name="stat_name"
											onchange="reloadCalendar();" /> <span>频次（次）</span>
										</label> <label> <input type="radio" value="1"
											name="stat_name" onchange="reloadCalendar();" /> <span>数据量</span>
										</label>
								</div> --%>

								
							</div>
						</div>



						<div class="row">
							<div class="col-xs-10">


								<div id='calendar'></div>
							</div>
							
							<div class="col-xs-2" style="padding-top:50px">
								<div class="row" style="margin-bottom: 5px;">
									<div class="col-xs-2" style="height:18px; border: black solid 1px; margin-right:10px;"></div>
									当日有数据
								</div>

								<div class="row" style="margin-bottom: 5px;">
									<div class="col-xs-2" style="height:18px; border: black solid 1px; margin-right:10px; background-color: rgb(171, 186, 195);"></div>
									当日无数据
								</div>

								<div class="row" style="margin-bottom: 5px;">
									<div class="col-xs-2" style="height:18px; border: black solid 1px; margin-right:10px; background-color:red;"></div>
									数据峰值
								</div>
								
								<div class="row">
									<div class="col-xs-2" style="height:18px; border: black solid 1px; margin-right:10px; background-color:rgb(252, 248, 227);"></div>
									今天
								</div>
							</div>
						</div>
					</div>


				</div>

			</div>
		</div>
	</div>
</body>
</html>